<template>
  <!-- 视频模板 -->
  <div class="wdsp">
    <!-- 头部 -->
    <div class="row">
      <div class="line"></div>
      <div>视频模板</div>
      <div class="iconfont icon-close" @click="closeSpmb">&#xe61d;</div>
    </div>
    <!-- 列表 竖版 type.value == 2 -->
    <div class="video-list-s">
      <el-row :gutter="10">
        <el-col :span="4" v-for="(row, index) in videoListyou" :key="index">
          <div class="video-list-row">
            <div class="video-list-col">
              <video controls :src="row.video_url"></video>
              <div class="time">{{ "01:06" }}</div>
              <div class="actions">
                <div class="use" @click="useModelyoutang(row)">使用</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div v-for="(row, index) in videoList" :key="index" class="video-list-row">
        <div v-for="(col, i) in row" :key="i" class="video-list-col">
          <video controls :src="'http://admin.yingwangke.com' + col.video"></video>
          <div class="time">{{ "01:06" }}</div>
          <div class="actions">
            <div class="use" @click="useModel(col)">使用</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="video-list-s">
      <div v-for="(row, index) in videoListyou" :key="index" class="video-list-row">
        <div class="video-list-col">
          <video controls :src="row.video_url"></video>
          <div class="time">{{ "01:06" }}</div>
          <div class="actions">
            <div class="use" @click="useModel(row)">使用</div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 分页 -->
    <!-- <div class="spmb-page">
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="limt"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="currentChange"
      >
      </el-pagination>
    </div> -->
    <!-- ai 模板表单弹窗 -->
    <el-dialog :visible.sync="showSpmbDialog" width="70%" :show-close="false" class="ai-dialog">
      <!-- 表单 -->
      <div class="vedio-form">
        <div class="upload-list">
          <div v-for="(item, key) in formData" :key="key" class="form-item">
            <!-- 图片上传 -->
            <div v-if="item.type == 'image'" class="form-image">
              <div class="form-image-btn">
                <label :for="key">
                  <div v-if="!item.value" class="iconfont icon-add">
                    &#xe60d;
                  </div>
                  <img v-if="item.value" :src="item.value" alt="" class="preview-image" />
                </label>
                <input type="file" accept="image/*" :id="key" style="display: none"
                  @change="formUploadFile($event, key)" />
              </div>
              <div class="form-image-line">
                <div class="form-image-row">
                  <div class="title">{{ item.title }}</div>
                  <div class="iconfont icon-close" @click="del(key)">
                    &#xe61d;
                  </div>
                </div>

                <div class="form-image-row">
                  <el-progress color="#387CF7" :show-text="false" :stroke-width="8"
                    :percentage="item.progress ? item.progress : 0"></el-progress>
                </div>
                <div>{{ item.reqtext }}</div>
              </div>
            </div>
            <!-- 音频上传 -->
            <div v-if="item.type == 'music'" class="form-image">
              <div class="form-image-btn">
                <label :for="key + '1'">
                  <div class="iconfont icon-add">&#xe6ed;</div>
                </label>
                <input type="file" accept="audio/*" :id="key + '1'" style="display: none"
                  @change="formUploadFile($event, key)" />
              </div>
              <div class="form-image-line">
                <div class="form-image-row">
                  <div class="title">{{ item.title }}</div>
                  <div class="iconfont icon-close" @click="del(key)">
                    &#xe61d;
                  </div>
                </div>
                <div class="form-image-row">
                  <el-progress color="#387CF7" :show-text="false" :stroke-width="8"
                    :percentage="item.progress ? item.progress : 0"></el-progress>
                </div>
                <div>{{ item.reqtext }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="upload-list">
          <!-- 文字输入 -->
          <div v-for="(item, key) in formData" :key="key" class="form-item">
            <div v-if="item.type == 'text'" class="form-text">
              <div class="form-text-label">
                <div class="label">
                  {{ item.title }}
                </div>
                <!-- <div v-if="item.verify == 'required'" class="iconfont icon">
                  &#xe72a;
                </div> -->
              </div>
              <input type="text" v-model="item.value" :placeholder="item.reqtext" class="form-text-input" />
              <!-- <div>{{ item.reqtext }}</div> -->
            </div>
            <!-- 颜色选择 -->
            <div v-if="item.type == 'color'" class="form-color">
              <el-color-picker v-model="item.value"></el-color-picker>
              <div class="form-color-text">{{ item.reqtext }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 确定 重置 -->
      <div class="form-btn">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="confirmTmpl">确定</my-button>
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="resetTmpl">重置</my-button>
      </div>
      <!--close icon -->
      <div class="close" @click="showSpmbDialog = false">
        <div class="iconfont icon">&#xe608;</div>
      </div>
    </el-dialog>

    <el-dialog title="模板编辑" :before-close="handleClose" :fullscreen="fullscreenbook" :visible.sync="dialogTableVisible">
      <iframe :src="openurl"   id="map" scrolling="no" frameborder="0"
        style="width: 100%;margin-left: -100px;position: absolute;inset: 4px 0px 10px 210px;height: 100%;margin-top: 48px;"></iframe>
    </el-dialog>

  </div>
</template>
<script>
  import myButton from "@/components/myButton.vue";
  export default {
    components: {
      myButton,
    },
    data() {
      return {
        currentPage: 1,
        dialogTableVisible: false,
        url: 'http://mobanapi.appletcloud.net',
        limt: 15,
        total: 0,
        openurl: "",
        formData: {},
        fullscreenbook: true,
        key: '',
        videoList: [],
        videoListyou: [],
        showSpmbDialog: false,
      };
    },
    mounted() {
      this.getVideoTemplate();
      this.getVideoTemplateyou();
    },
    beforeDestroy() {
      window.onresize = null;
    },
    methods: {
      async getVideoTemplate() {
        let res = await this.$api.getVideoTemplate({
          type: "tpllist",
          video_type: "videoadd",
        });
        let arr = []; //定义外面的数组
        for (let i = 0; i < res.data.length; i += 6) {
          arr.push(res.data.slice(i, i + 6));
        }
        this.videoList = arr;
      },
      async getVideoTemplateyou() {
        let res = await this.$api.fatemplatelist();
        this.videoListyou = res.data
      },
      closeSpmb() {
        this.$router.push({
          path: "/wdsp/add",
          query: {
            activeTabVal: this.$route.query.activeTabVal
          },
        });
      },
      // 视频模板
      async useModel(mode) {
        console.log(mode);
        let res = await this.$api.getVideoTemplateById({
          id: mode.id,
          type: "video",
          qt_type: "json",
        });
        this.formData = res.videodata;
        this.showSpmbDialog = true;
      },
      //获取key
      useModelyoutang(theme_id) {
        let uid = JSON.parse(window.localStorage.getItem("person"))
        console.log(uid)
        const url = this.url + '/videontemplatelist/Mytemplate?page=1&limit=50&system=payPerDay&uid=' + uid.id;
        this.$http.get(url).then(
          response => {
            const result = response.data;
            if (result.code == 200) {
              this.key = result.data.key
              this.openedit(theme_id.theme_id)
            } else {
              return this.$confirm(result.msg);
            }
          },
          response => {},
        );
      },
      handleClose(done) {
        this.openurl = ''
        done();
      },
      //打开编辑器
      openedit(theme_id) {
        this.dialogTableVisible = true
        this.openurl = this.url + '/tmpltest/#/jp?key=' + this.key + '&theme_id=' + theme_id +
          "&resolution=16x9&status=1";
      },
      confirmTmpl() {
        for (let key in this.formData) {
          if (
            this.formData[key].verify == "required" &&
            this.formData[key].value == ""
          ) {
            return this.$message(this.formData[key].reqtext);
          }
          if (
            this.formData[key].type == "image" ||
            this.formData[key].type == "images"
          ) {
            this.formData[key].arr = this.formData[key].value.split("|");
          }
          if (this.formData[key].type == "musics") {
            this.formData[key].arr = this.formData[key].value.split("|");
          }
        }
        window.sessionStorage.setItem("tmpl", JSON.stringify(this.formData));
        this.showSpmbDialog = false;
        this.$router.push({
          path: "/wdsp/add",
          query: {
            activeTabVal: this.$route.query.activeTabVal
          },
        });
      },
      resetTmpl() {
        for (let key in this.formData) {
          this.formData[key].value = "";
          this.formData[key].progress = 0;
        }
      },
      currentChange() {},
      async formUploadFile(e, key) {
        let file = e.target.files[0];
        let formData = new FormData();
        formData.append("file", file, file.name);
        let res = await this.$api.uploadFile(formData, (e) => {
          let obj = JSON.parse(JSON.stringify(this.formData[key]));
          obj.progress = parseInt((e.loaded / e.total) * 100);
          this.$set(this.formData, key, obj);
        });
        e.target.value = "";
        this.formData[key].value = res.data.url;
      },
      del(key) {
        this.formData[key].value = "";
        this.formData[key].progress = 0;
      },
    },
  };
</script>

<style lang="less" scoped>
  .wdsp {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 112px 0 110px 0;
    box-sizing: border-box;
    background-color: #fff;
  }

  .row {
    position: absolute;
    left: 0px;
    top: 52px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
    padding: 0px 23px 0px 46px;
    box-sizing: border-box;

    .line {
      width: 4px;
      height: 20px;
      margin-right: 12px;
      background-color: #387CF7;
    }

    .icon-close {
      position: absolute;
      right: 23px;
      top: 50%;
      transform: translateY(-50%);
      color: #555;
      cursor: pointer;
    }
  }

  .video-list-s {
    width: 100%;
    height: 100%;
    padding: 0 45px;
    box-sizing: border-box;
    overflow: auto;

    .video-list-row {
      display: flex;
      width: 100%;
      height: 400px;
      margin-bottom: 35px;

      .video-list-col {
        position: relative;
        flex-shrink: 0;
        max-width: 245px;
        height: 400px;
        margin-right: 35px;
      }

      :last-child {
        margin-right: 0;
      }
    }
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    cursor: pointer;

    .use {
      width: 60px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  .time {
    position: absolute;
    bottom: 7px;
    right: 18px;
    width: 50px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
  }

  .form-item {
    width: 100%;

    .form-text {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 50px 0 50px;
      box-sizing: border-box;
      margin-bottom: 15px;

      .form-text-label {
        flex-shrink: 0;
        display: flex;
        width: 150px;

        .label {
          width: 100%;
          color: #999;
          font-size: 12px;
          text-align: right;
          padding-right: 10px;
          box-sizing: border-box;
        }
      }

      .form-text-input {
        flex-grow: 1;
        border: 1px solid #cecdcd;
        background-color: transparent;
        height: 30px;
        outline: none;
        padding: 0 10px;
        color: #999;
        font-size: 12px;

        &::-webkit-input-placeholder {
          color: #cecdcd;
          font-size: 12px;
        }

        &::-moz-placeholder {
          color: #cecdcd;
          font-size: 12px;
        }

        &::-ms-input-placeholder {
          color: #cecdcd;
          font-size: 12px;
        }
      }
    }

    .form-color {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 50px 0 200px;
      box-sizing: border-box;
      margin-bottom: 30px;

      .form-color-text {
        color: #999;
        font-size: 12px;
        margin-left: 15px;
      }
    }

    .form-image {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      padding: 0 50px;
      box-sizing: border-box;
      margin-bottom: 30px;

      .form-image-btn {
        flex-shrink: 0;
        width: 114px;
        height: 100%;
        margin-right: 10px;

        label {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          user-select: none;
          cursor: pointer;
          // padding: 5px;
          box-sizing: border-box;
          background-color: #f4f7fc;

          img {
            object-fit: contain;
          }

          .icon-add {
            color: #387CF7;
            font-size: 32px;
          }

          .preview-image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .form-image-line {
        flex-grow: 1;
        height: 100%;
        padding: 13px 0;
        box-sizing: border-box;

        .form-image-row {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          color: #999;
          margin-bottom: 10px;

          .el-progress {
            width: 100%;
          }

          .title {
            font-size: 14px;
          }

          .icon-close {
            position: absolute;
            top: -10px;
            right: 0;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }

  .spmb-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;

    /deep/ .active {
      background-color: #387CF7 !important;
    }
  }

  // 弹窗样式

  // 弹窗样式
  /deep/ .el-progress .el-progress-bar__outer {
    background-color: #f4f7fc !important;
  }

  .ai-dialog {
    /deep/ .el-dialog {
      border-radius: 20px;
    }

    /deep/ .el-dialog__header {
      padding: 0;
    }

    /deep/ .el-dialog__body {
      position: relative;
      height: 700px;
      padding: 80px 60px 100px 60px;
      box-sizing: border-box;
      background-color: #fff;
      border: 2px solid #387CF7;
      border-radius: 20px;

      .vedio-form {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 0 100px 0;

        .upload-list {
          width: 50%;
          height: 100%;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
          }

          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #f4f7fc;
          }

          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
            // border-radius: 5px;
            background: transparent;
          }
        }
      }

      .form-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        .button {
          width: 140px;
          height: 34px;
          margin: 0 40px;
        }
      }

      .close {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(30%, -30%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        background-color: #f4f7fc;
        border-radius: 50%;
        cursor: pointer;
        user-select: none;

        .icon {
          color: #DBDBDB;
          font-size: 32px;
        }
      }
    }

    /deep/ .el-dialog__footer {
      padding: 0;
    }
  }
</style>
